<template>
  <div class="app-container">
    <div class="manage-header">
      <dynamic-search-form inline :formData="formData" :form="queryParams" @postForm="postData"></dynamic-search-form>
    </div>

    <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['pms:type:add']"
      >新增
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        v-hasPermi="['system:user:export']"
      >导出
      </el-button>
    </el-col>
    <el-popover title="列筛选" trigger="click" style="float: right;margin-right: 10px;">
      <el-checkbox-group v-model="checkedColumns" size="mini">
        <el-checkbox style="display: block;" v-for="(item,index) in tableColumns" :key="item.name" :label="item.name"
                     @change="chickBoxGroupChange(item)"
        >{{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
    </el-popover>
    </el-row>

    <!--数据-->
    <dynamic-table :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                  :columns="tableColumns" :operates="operates">
    </dynamic-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
import dynamicSearchForm from '@/views/components/dynamicSearchForm'
import dynamicTable from '@/views/components/dynamicTable'
import { getListData, delDoc } from "@/api/pms/doc";
import { getConfigInfo } from '@/api/pms/repository'

export default {
  name: "",
  components: {
    dynamicSearchForm,
    dynamicTable
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 文档表格数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      formData: [],
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      checkedColumns: [],
      tableColumns: [],
      // 按钮
      operates: {// 列操作按钮
        width: 150,
        list: [
          {
            id: '1',
            label: '删除',
            style: 'cursor:pointer;color: #409eff;',
            class: 'el-icon-delete',
            show: true,
            plain: false,
            method: (index, row) => {
              this.handleDel(row)
            }
          }
        ]
      }
    };
  },
  created() {
    this.getConfig();
    this.getList();
  },
  methods: {
    /** 获取配置信息 */
    getConfig() {
      this.loading = true
      getConfigInfo().then(response => {
        this.tableColumns = response.data.tableInfo;
        this.formData = response.data.formInfo;
        this.tableColumns.forEach((item, index) => {
          this.checkedColumns.push(item.label)
        })
        this.loading = false
      })
    },
    /** 查询文档列表 */
    getList() {
      this.loading = true;
      getListData(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //控制列显示
    chickBoxGroupChange(item) {
      item.show = !item.show
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    postData(val){
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
      }
      var keys=Object.keys(val)
      for(var i=0;i<keys.length;i++){
        this.queryParams[keys[i]]=val[keys[i]]
      }
      this.getList();
      //回显搜索日期
      // if(this.queryParams.beginTime && this.loading===false){
      //   this.queryParams.createTime=[];
      //   this.queryParams.createTime[0]=this.queryParams.beginTime;
      //   if(this.queryParams.endTime){
      //     this.queryParams.createTime[1]=this.queryParams.endTime;
      //   }
      // }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({path: '/doc/create'});
    },
    // 导出
    handleExport(){

    },
    // /** 修改按钮操作 */
    // handleUpdate(row) {
    //   this.reset();
    //   const id = row.id || this.ids
    //   getDoc(id).then(response => {
    //     this.form = response.data;
    //     this.open = true;
    //     this.title = "修改文档";
    //   });
    // },
    // /** 提交按钮 */
    // submitForm: function() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       if (this.form.id != undefined) {
    //         updateDoc(this.form).then(response => {
    //           if (response.code === 200) {
    //             this.msgSuccess("修改成功");
    //             this.open = false;
    //             this.getList();
    //           }
    //         });
    //       } else {
    //         addDoc(this.form).then(response => {
    //           if (response.code === 200) {
    //             this.msgSuccess("新增成功");
    //             this.open = false;
    //             this.getList();
    //           }
    //         });
    //       }
    //     }
    //   });
    // },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除文档编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delDoc(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    // 状态翻译
    statusFormat(row, column) {
      if (row.status == 1) {
        return "正常";
      }else{
        return "禁用";
      }
    }
  }
};
</script>
